<template>
	<view class="container">
		<!-- 登录 -->
		<view class="toubu">
			<view class="toubu-logo">
				<image src="/static/icon/logo.png" mode=""></image>
			</view>
			<view class="toubu-youbian">
				<view class="youbian-shu">
					<text>{{walletAddress}}</text>
				</view>
				<view class="youbian-logo">
					<image src="/static/icon/touxian.png" mode=""></image>
				</view>
			</view>
		</view>
		<!-- 资产 -->
		<view class="zhichang">
			<view class="zhanghao">
				<view class="zhanghao1">
					<text>ID:{{formatNumber(userInfo.dizhi)}}</text>
				<image @click="fuzhi" class="lianjie1img" src="/static/icon/fuzhi.png" mode=""></image>
				</view>
				<!-- <view class="zhanghao2" @click="goshezhi">
					<image src="/static/icon/shezhi.png" mode=""></image>
				</view> -->
			</view>
			<!-- 总资产 -->
			<view class="diyipai1">
				<view class="title2">
					<text>{{$t('my.zongzicang')}}:</text>
					<text>${{userInfo.yue||0}}</text>
				</view>
				<view class="title3">
					<text>{{$t('my.jibie')}}:</text>
					<text style="color: #117cff;">V{{userInfo.jibie}}</text>
				</view>
				
			</view>
			<!-- 账户余额 -->
			<view class="diyipai">
				<view class="title6">
					<view class="title5">
						<text>{{$t('my.tuanduiyeji')}}</text>
					<text>${{userInfo.tuanduiyeji||0}}</text>
					</view>
					
				</view>
				<view class="title1">
					<view class="title5">
						<text>{{$t('my.xinzengyeji')}}</text>
					<text>${{userInfo.xinzengyeji||0}}</text>
					</view>
					
				</view>
				<view class="title4">
					<view class="title5">
						<text>{{$t('my.shouyi')}}</text>
					<text>${{userInfo.jinrishouyi||0}}</text>
					</view>
					
				</view>
			</view>
			<!-- 团队 -->
			<view class="diyipai">
				<view class="title6">
					<view class="title5">
						<text>{{$t('my.mytuandui')}}</text>
					<text>{{userInfo.tuandui||0}}({{$t('my.ren')}})</text>
					</view>
					
				</view>
				<view class="title1">
					<view class="title5">
						<text>{{$t('my.jinrixinzeng')}}</text>
					<text>{{userInfo.xzzhitui||0}}({{$t('my.ren')}})</text>
					</view>
					
				</view>
				<view class="title4">
					<view class="title5">
						<text>{{$t('my.zituirenshu')}}</text>
					<text>{{userInfo.zt||0}}({{$t('my.ren')}})</text>
					</view>
					
				</view>
			</view>
			<!-- 社区节点 -->
			<view class="diyipai">
				<view class="title6">
					<view class="title5">
						<text>{{$t('kuan.duizhangfuli')}}</text>
					<text>{{userInfo.shequjiedian||0}}({{$t('my.ge')}})</text>
					</view>
					
				</view>
				<view class="title1">
					<view class="title5">
						<text>{{$t('my.xingzengjiedian')}}</text>
					<text>{{userInfo.shenqujinrixinzeng||0}}({{$t('my.ge')}})</text>
					</view>
					
				</view>
				<view class="title4">
					<view class="title5">
						<text>{{$t('my.xiaoquyeji')}}</text>
					<text>${{userInfo.xiaoquyeji||0}}</text>
					</view>
					
				</view>
			</view>
		</view>

		<!-- 空投 -->
		<view class="kongtouu">
			<view class="kongtouu1" @click="gotixian">
				<view class="kongtouu2">
					<image class="kongtouu2img" src="/static/img/icon.png" mode=""></image>
				</view>
				<text>{{$t('my.kongtou')}}</text>
			</view>
			<view class="kongtouu1" @click="golicai">
				<view class="kongtouu2">
					<image class="kongtouu2img" src="/static/img/icon1.png" mode=""></image>
				</view>
				<text>{{$t('duihuans')}}</text>
			</view>
			<view class="kongtouu1" @click="goshequn">
				<view class="kongtouu2">
					<image class="kongtouu2img" src="/static/img/icon2.png" mode=""></image>
				</view>
				<text>{{$t('yaoqing')}}</text>
			</view>
			<view class="kongtouu1" @click="goerweima">
				<view class="kongtouu2">
					<image class="kongtouu2img" src="/static/img/icon3.png" mode=""></image>
				</view>
				<text>{{$t('duihuan.myerwei')}}</text>
			</view>
		</view>

		<!-- 资产 -->
		<view class="list">
			<view class="list-cont">
				<text>{{$t('my.zicang')}}</text>
				<text>{{$t('my.bizhong')}}</text>
				<text>{{$t('my.shuliang')}}</text>
			</view>

			<view class="list-item" @click="gousdt">
				<view class="list-zuo">
					<view class="list-img">
						<image src="/static/icon/usdt.jpg" mode=""></image>
					</view>
					<view class="list-name">
						<text class="list-name1">USDT</text>
						<text class="list-name2">{{userInfo.usdt||0}}</text>
					</view>
				</view>
				<view class="list-you">
					<!-- <text class="list-you1">{{userInfo.usdt||0}}</text> -->
					<image class="list-you2" src="/static/icon/you.png" mode=""></image>
				</view>
			</view>
			<view class="list-item" @click="gouxgt">
				<view class="list-zuo">
					<view class="list-img1">
						<text>X</text>
					</view>
					<view class="list-name">
						<text class="list-name1">XGT</text>
						<text class="list-name2">{{userInfo.xgt||0}}</text>
					</view>
				</view>
				<view class="list-you">
					<!-- <text class="list-you1">{{userInfo.xgt||0}}</text> -->
					<image class="list-you2" src="/static/icon/you.png" mode=""></image>
				</view>
			</view>
			<view class="list-item" @click="gousdk">
				<view class="list-zuo">
					<view class="list-img2">
						<text>K</text>
					</view>
					<view class="list-name">
						<text class="list-name1">USDK</text>
						<text class="list-name2">{{userInfo.usdk||0}}</text>
					</view>
				</view>
				<view class="list-you">
					<!-- <text class="list-you1">${{userInfo.usdk||0}}</text> -->
					<image class="list-you2" src="/static/icon/you.png" mode=""></image>
				</view>
			</view>
		</view>
		
		<!-- 邀请码弹窗组件 -->
		<InviteCodeModal
			:visible="inviteModalVisible"
			:title="inviteModalConfig && inviteModalConfig.title || ''"
			:placeholder="inviteModalConfig && inviteModalConfig.placeholder || ''"
			:cancelText="inviteModalConfig && inviteModalConfig.cancelText || ''"
			:confirmText="inviteModalConfig && inviteModalConfig.confirmText || ''"
			@confirm="handleInviteModalConfirm"
			@cancel="handleInviteModalCancel"
		/>
	</view>
</template>

<script>
	import {
		Debounce
	} from "@/api/debounce.js"; //防抖
	import walletMixin from "@/mixins/walletMixin.js"; // 钱包混入
	import InviteCodeModal from "@/components/InviteCodeModal.vue"; // 邀请码弹窗组件

	export default {
		components: {
			InviteCodeModal
		},
		mixins: [walletMixin],
		data() {
			return {
				userInfo:{},
				newmoney: '',

			}
		},
		onLoad() {
			this.newmoney = uni.getStorageSync('newmoney')
			// console.log('个人用户信息',this.userinfo);
			this.getuserinfo()
		},
		// mounted() {
		//  // 每隔5秒刷新一次用户信息
		//     setInterval(() => {
		//       this.getuserinfo()
		//     }, 5000);	
		// },
		
		methods: {
			// 格式数字
			formatNumber(number) {
				// 处理 undefined 或 null 的情况
				if (!number) return '';
				// 将数字转化为字符串
				const str = number.toString();
				// 提取前四位和后四位，中间用省略号代替
				const start = str.slice(0, 5);
				const end = str.slice(-5);
				return `${start}......${end}`;
			},
			// 我的二维码
			goerweima: Debounce(function() {
				this.$tab.navigateTo('/pages/my/myerweima')
			}, 1000),
			// 获取个人资料
			getuserinfo() {
				let data = {}
				let opts = {
					url: '/user/GetUserInfo',
					method: 'GET'
				};
				this.api.httpTokenRequest(opts, data).then(res => {
					// console.log('个人资料', res);
					if (res[1].data.state == 'success') {
						this.userInfo = res[1].data.list[0]

					}

				})
			},

			// 重写用户信息更新方法
			async updateUserInfo() {
				await this.getuserinfo();
			},
			// 复制
			fuzhi() {
				var that = this
				uni.setClipboardData({
					data: String(that.userInfo.dizhi),
					success: function() {
						that.$modal.msg(that.$t('msg.error6'))
					},
					fail: function(err) {
						// console.log('复制失败:', err);
					}
				});
			},
			// 设置
			goshezhi:Debounce(function(){
				this.$tab.navigateTo('/pages/my/shezhi')
			},1000),
			// 兑换
			golicai: Debounce(function() {
				this.$tab.navigateTo('/pages/duihuan/duihuan')
			}, 1000),
			// 社群
			goshequn: Debounce(function() {
				this.$tab.navigateTo('/pages/my/shequnjianshe')
			}, 1000),
			// 提现
			gotixian: Debounce(function() {
				this.$tab.navigateTo('/pages/my/tixian')
			}, 1000),
			//USDT列表
			gousdt: Debounce(function() {
				this.$tab.navigateTo('/pages/my/usdtlist')
			}, 1000),
			//XGT列表
			gouxgt: Debounce(function() {
				this.$tab.navigateTo('/pages/my/xgtlist')
			}, 1000),
			//USDK列表
			gousdk: Debounce(function() {
				this.$tab.navigateTo('/pages/my/usdklist')
			}, 1000),

		}
	}
</script>

<style>
	.container {
		width: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	/* 头部登录 */
	.toubu {
		width: 94%;
		padding: 20rpx;
		margin-top: 80rpx;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
	}

	.toubu-logo {
		width: 180rpx;
		height: 60rpx;
	}

	.toubu-youbian {
		display: flex;
		flex-direction: row;
		align-items: center;
	}

	.youbian-shu {
		width: 220rpx;
		height: 50rpx;
		border-radius: 30rpx;
		background-color: #5e5e5e;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 24rpx;
		color: #ffffff;
		margin-right: 15rpx;
	}

	.youbian-logo {
		width: 60rpx;
		height: 60rpx;
		overflow: hidden;
		border-radius: 50%;
	}

	.zhichang {
		width: 86%;
		padding: 25rpx;
		border-radius: 20rpx;
		margin-top: 30rpx;
		display: flex;
		flex-direction: column;
		background-color: #30313f;
	}

	.zhanghao {
		width: 100%;
		margin-top: 20rpx;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
	}
	.zhanghao1{
		display: flex;
		flex-direction: row;
		align-items: center;
	}
	.zhanghao2{
		width: 35rpx;
		height: 35rpx;
	}

	.lianjie1img {
		width: 40rpx;
		height: 40rpx;
		margin-left: 10rpx;
	}

	.diyipai {
		width: 100%;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		margin-top: 30rpx;
		font-size: 28rpx;
	}

	.title1 {
		width: 30%;
		display: flex;
		flex-direction: column;
		word-wrap: break-word;  /* 对文本元素应用换行 */
		overflow-wrap: break-word;  /* 对文本元素应用换行 */
		white-space: normal;
	}
	.title6{
		width: 30%;
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		word-wrap: break-word;  /* 对文本元素应用换行 */
		overflow-wrap: break-word;  /* 对文本元素应用换行 */
		white-space: normal;
	}

	.diyipai1 {
		width: 100%;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		margin-top: 30rpx;
		font-size: 24rpx;
	}

	.title2 {
		display: flex;
		flex-direction: row;
		align-items: center;
		font-size: 18px;
		font-weight: 700;
	}
	.title3{
		display: flex;
		flex-direction: row;
		align-items: center;
		font-size: 16px;
	}
	.title4{
		width: 30%;
		display: flex;
		flex-direction: column;
		align-items: end;
		word-wrap: break-word;  /* 对文本元素应用换行 */
		overflow-wrap: break-word;  /* 对文本元素应用换行 */
		white-space: normal;
	}
	.title5{
		display: flex;
		flex-direction: column;
		align-items: center;
	}



	.kongtouu {
		width: 88%;
		padding: 20rpx;
		height: 140rpx;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		margin-top: 50rpx;
		background-color: #30313f;
		border-radius: 20rpx;
	}

	.kongtouu1 {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		font-size: 28rpx;
		font-weight: 500;
	}

	.kongtouu2 {
		width: 110rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-bottom: 15rpx;
	}

	.kongtouu2img {
		width: 75rpx;
		height: 60rpx;
	}

	.list {
		width: 90%;
		padding: 20rpx;
		margin-top: 30rpx;
		display: flex;
		flex-direction: column;
		font-size: 28rpx;
		font-weight: 500;
		margin-bottom: 140rpx;
	}

	.list-cont {
		width: 300rpx;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
	}

	.list-item {
		width: 98%;
		padding: 20rpx;
		margin-top: 30rpx;
		border-radius: 20rpx;
		background-color: #5e5e5e;
		border: 1rpx solid #c9c9c9;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;

	}

	.list-zuo {
		display: flex;
		flex-direction: row;
		align-items: center;
	}

	.list-img {
		width: 90rpx;
		height: 90rpx;
		border-radius: 50%;
		overflow: hidden;
	}

	.list-img1 {
		width: 80rpx;
		height: 80rpx;
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 60rpx;
		font-weight: 700;
		border-radius: 50%;
		border: 8rpx solid #a5abfc;
		border-radius: 50%;
		background: #a5abfc;
		box-shadow: inset 5px 5px 10px #5e6190,
			inset -5px -5px 10px #ecf5ff;
	}

	.list-img2 {
		width: 80rpx;
		height: 80rpx;
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 60rpx;
		font-weight: 700;
		border-radius: 50%;
		border: 8rpx solid #c2fed2;
		border-radius: 50%;
		background: #c2fed2;
		box-shadow: inset 5px 5px 10px #617f69,
			inset -5px -5px 10px #ffffff;
	}

	.list-name {
		width: 350rpx;
		display: flex;
		flex-direction: row;
		margin-left: 15rpx;
	}

	.list-name1 {
		width: 30%;
		font-size: 32rpx;
		font-weight: 700;
	}

	.list-name2 {
		width: 30%;
		font-size: 28rpx;
		font-weight: 700;
		margin-left: 30rpx;
	}

	.list-you {
		font-size: 30rpx;
		font-weight: 700;
		display: flex;
		flex-direction: row;
		align-items: center;
	}

	.list-you1 {
		margin-right: 15rpx;
	}

	.list-you2 {
		width: 40rpx;
		height: 40rpx;
	}
</style>